
<template>
  <div>
    <basic-container>
      <el-form ref="formSearch"
               :model="formSearch"
               label-width="100px"
               size="small"
               :inline="true">
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click.stop="handleAdd()">添加</el-button>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.name"
                    placeholder="请输入实验室名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="searchFormSubmit()">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <avue-crud :option="tableOption"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :page="page"
                 ref="crud"
                 @size-change='sizeChange'
                 @current-change='currentPage'>
        <!-- <template slot-scope="scope" slot="status">
                {{scope.row.status==1?'未留样':'已留样'}}
            </template> -->
        <template slot-scope="scope"
                  slot="editTime">
          {{scope.row.name}}<span>-</span>{{scope.row.state}}
        </template>
        <template slot-scope="scope"
                  slot="menu">
          <el-button type="primary"
                     size="small"
                     plain
                     @click.stop="handleEdit(scope.row,scope.index)">修改</el-button>
          <el-button type="primary"
                     size="small"
                     plain
                     @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <!-- 添加/修改实验室-->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogFormVisible"
               width="40%"
               class="diading">
      <el-form ref="dialogForm"
               :model="dialogForm"
               :rules="rules"
               label-position="left"
               label-width="110px">
        <el-form-item label="实验室名称："
                      prop='name'>
          <el-input v-model="dialogForm.name"
                    placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="负责人："
                      prop='userid'>
          <el-select v-model="dialogForm.userid"
                     placeholder="请选择"
                     style="width:100%">
            <el-option v-for="item in userManaages"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer"
           style="text-align:center">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="primary"
                   @click="handleAddLine('dialogForm')">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listOption } from "@/const-personal/sysSetup/laboratory.js"
import {
  getLaboratoryList,
  addLaboratory,
  deleteLaboratory,
  updateLaboratory,

} from "@/api/sysSetup/laboratory";
import {
  getUserInfo
} from "@/api/sysSetup/warehouse";
export default {
  name: "laboratoryManage",
  data () {
    return {
      formSearch: {
        name: ""
      },
      tableOption: listOption,
      page: {
        total: 10, //总页数
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示多少条
        pageSizes: [5, 10, 20]
      },
      tableLoading: false,
      tableData: [],//数据
      // 新增修改
      dialogTitle: '添加实验室',
      dialogFormVisible: false,
      rules: {
        name: [{ required: true, message: '请输入实验室名称', trigger: 'blur' }],
        userid: [{ required: true, message: '请选择负责人', trigger: 'change' }]
      },
      dialogForm: {},
      is_update: false,//修改
      userManaage: [],
      updateId: null,//修改id
      updateUserId: null //not修改情况下userid
    }
  },
  mounted () {
    this._getLaboratoryList()
    this._getUserManaage()
  },
  computed: {
    userManaages () {
      return this.userManaage
    }
  },
  methods: {
    //实验室分页查询
    _getLaboratoryList (name) {
      let parmas = {
        page: this.page.currentPage,
        size: this.page.pageSize
      };
      if (name) {
        parmas['name'] = name
        parmas['page'] = 1
      }
      getLaboratoryList(parmas).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list
          this.page.total = res.data.data.total;
          this.page.pageSize = res.data.data.pageSize
          this.page.currentPage = res.data.data.pageNum
        }
      })
    },
    //负责人
    _getUserManaage () {
      getUserInfo().then(res => {
        if (res.data.code === 200) {
          this.userManaage = res.data.data
        }
      })
    },
    // 搜索
    searchFormSubmit () {
      this._getLaboratoryList(this.formSearch.name)
      // this.formSearch.name = ''
    },
    // 重置
    handleReset () {

    },
    // 切换页面
    currentPage (val) {
      console.log(val)
      this.page.currentPage = val;
      this._getLaboratoryList()
    },
    sizeChange (val) {
      console.log(val);
      this.page.pageSize = val
      this._getLaboratoryList()
    },
    // 新增
    handleAdd () {
      this.dialogFormVisible = true;
      this.dialogTitle = '添加实验室';
      this.is_update = false
      this.dialogForm = {
        name: '',
        userid: ''
      }
      try {
          this.$refs.dialogForm.resetFields();
      } catch (e) { }
    },
    // 修改
    handleEdit (row, index) {
      this.dialogFormVisible = true;
      this.dialogTitle = '修改实验室';
      this.is_update = true
      let res = this.tableData.find(item => item.id == row.id)
      // console.log(res);
      this.updateId = row.id
      this.updateUserId = res.userId
      this.dialogForm = {
        name: res.name,
        userid: res.userName
      }
    },
    // 删除
    handleDelete (row, index) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        //请求--删除
        deleteLaboratory({ id: row.id }).then(res => {
          if (res.data.code === 200) {
              this._getLaboratoryList()
              this.$notify({ title: '操作成功', type: 'success', message: '删除成功!' });
          } else {
              this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger', });
          }
        })
        // this.$delete(this.gridData, index)

      });
    },
    // 确认新增/修改
    handleAddLine (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parmas = {
            name: this.dialogForm.name,
            userId: typeof this.dialogForm.userid === 'number' ? this.dialogForm.userid : this.updateUserId
          }
          console.log(parmas)
          if (this.is_update) {
            //修改
            parmas['id'] = this.updateId
            updateLaboratory(parmas).then(res => {
              if (res.data.code === 200) {
                this._getLaboratoryList()
                this.$refs[formName].resetFields();
                this.dialogFormVisible = false
                this.$notify({ title: '操作成功', type: 'success', message: '修改成功!' });
              } else {
                  this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger', });
              }
            })
          } else {//新增
            addLaboratory(parmas).then(res => {
              if (res.data.code === 200) {
                this._getLaboratoryList()
                this.$notify({ title: '操作成功', type: 'success', message: '添加成功!' });
                this.dialogFormVisible = false
                this.$refs[formName].resetFields();
              } else {
                  this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger', });
              }
            })
          }
        }
      })
    }
  }
};
</script>

<style scoped>
</style>